<template>
	<view>
		<view class="viewCon">
			<view class="inputView">
				<view class="text_label">
					<text>企业名称</text>
				</view>
				<u-input class="ipt" v-model="inspObjName" placeholder="请输入企业名称" @blur="(e)=>inputSearch(e,1)">
				</u-input>
			</view>

			<view class="inputView">
				<view class="text_label">
					<text>预警类型</text>
				</view>
				<view class="iptview" @click="provinceClick">
					<u-input class="ipt" v-model="warningTypeName" placeholder="请输入预警类型" suffixIcon="arrow-down"
						:disabled="true" suffixIconStyle="color: #909399"></u-input>
				</view>
			</view>

			<u-picker keyName='name' :show="provinceShow" @cancel="provinceCancel" @confirm="provinceConfirm"
				:columns="provinceList">
			</u-picker>


			<u-picker :show="ownerShow" keyName='ownerName' @cancel="ownerCancel" @confirm="ownerConfirm"
				:columns="ownernameData">
			</u-picker>
			<!-- 		<view class="inputView">
				<view class="text_label">
					<text>预警时间</text>
				</view>
				<u-input class="ipt" v-model="ownernum" placeholder="请输入预警时间"></u-input>
			</view> -->

			<view class="btn" @click="queryClick">
				<text>查询</text>
			</view>
			<view class="btn" style="background-color:#5BB5F8 ;" @click="resetClick">
				<text>重置</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		warningMsgQuery,
		queryOwnerName
	} from '@/common/api/req.js'
	export default {
		data() {
			return {
				warningTypeName: '', //码表
				warningType: '', //码表
				inspObjName: "", //企业名称
				provinceShow: false,
				current: 1,
				size: 10,
				provinceList: [],
				indexNum: '',
				ownerShow: false,
				ownernameData: []

			};
		},
		methods: {
			queryClick() {
				// warningMsgQuery({
				// 	size: this.size,
				// 	current: this.current,
				// 	inspObjName: this.inspObjName,
				// 	warningType: this.warningType
				// }).then(res => {
				// let data = res.data.data.records

				let datastr = {
					inspObjName: this.inspObjName,
					warningType: this.warningType,
					index: this.indexNum
				}
				// this.$goBack('../warning/msg_warning?data=' + encodeURIComponent(JSON.stringify(data)) +
				// 	'&inspObjName=' + this.inspObjName + '&warningType=' + this.warningType + '&index=' +
				// 	this.indexNum, 5);

				let pages = getCurrentPages(); // 当前页面        
				let beforePage = pages[pages.length - 2]; // 上一页
				this.$goBack(1, 1, () => {
					beforePage.$vm.reload(datastr);
				})
				// })
			},
			resetClick() {},
			provinceClick() {
				this.provinceShow = true
			},
			provinceCancel() {
				this.provinceShow = false
			},
			provinceConfirm(e) {
				this.warningType = e.value[0].id
				this.warningTypeName = e.value[0].name
				this.provinceShow = false
			},
			inputSearch(e, num) {
				var value = e
				// 输入框防抖
				clearTimeout(this.debounceTimer);
				// 每次进来的时候都将之前的清除掉，如果还没到毫秒的时候就将之前的清除掉，这样就不会触发之前setTimeout绑定的事件， 如果超过毫秒，之前的事件就会被触发下次进来的时候同样清除之前的timer
				this.debounceTimer = setTimeout(() => {
					//输入框没值了，清空搜索框条件数据
					if (!value) {
						// 设置为初始状态
						return;
					}
					this.requestOwner(e)
				}, 1000)
			},

			requestOwner(ownername) {
				this.ownernameData = []
				queryOwnerName({
					ownerName: ownername,
				}).then(res => {
					let list = res.data.data
					if (list.length > 0) {
						this.ownernameData.push(list)
						this.ownerShow = true
					}

				})

			},
			ownerCancel() {
				this.ownerShow = false
			},
			ownerConfirm(e) {
				this.inspObjName = e.value[0].ownerName
				// this.ownernum = e.value[0].mcertId
				this.ownerShow = false
			},
			onLoad(option) {
				this.indexNum = option.tabIndex
				if (this.indexNum == 0) {
					this.provinceList = [
						[{
								"id": 1,
								"name": " 经营许可证逾期"
							}, {
								"id": 2,
								"name": " 道路运输证逾期"
							}, {
								"id": 3,
								"name": " 车辆年审逾期"
							}, {
								"id": 4,
								"name": " 车辆技术等级评定逾期"
							}, {
								"id": 5,
								"name": " 罐体有效期逾期"
							}, {
								"id": 6,
								"name": " 从业资格证逾期"
							}, {
								"id": 7,
								"name": " 异地经营"
							}, {
								"id": 8,
								"name": " 未投保承运人责任险"
							}, {
								"id": 9,
								"name": " 专用车辆数量不足营运要求"
							}, {
								"id": 10,
								"name": " 电子运单监测异常"
							},
							{
								"id": 11,
								"name": " 有运单无轨迹监测"
							},
							{
								"id": 12,
								"name": " 无运单有轨迹监测"
							},
							{
								"id": 13,
								"name": " 运单轨迹不符监测"
							}
						]
					]
				} else {
					this.provinceList = [
						[{
								id: "1001",
								name: "经营许可证",
							},
							{
								id: "1002",
								name: "道路运输证",
							},
							{
								id: "1003",
								name: "车辆年审",
							},
							{
								id: "1004",
								name: "车辆技术等级评定",
							},
							{
								id: "1005",
								name: "车辆罐体",
							},
							{
								id: "1006",
								name: "从业资格证",
							},
							{
								id: "1007",
								name: "动力车数不足运营要求",
							},
							{
								id: "1008",
								name: "安全运营",
							},
						]
					]
				}
			}

		}
	}
</script>

<style lang="scss">
	.viewCon {
		padding: 30rpx;



		.inputView {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.text_label {
				width: 180rpx;
				text-align: center;
				display: flex;
				align-items: center;

				text {
					font-size: 14px;
				}
			}

			.iptview {
				flex: 1;

				.ipt {
					// margin-left: 20rpx;
					background-color: #F5F7FA;
				}
			}

			.iptview {
				flex: 1;

				.ipt {
					// margin-left: 20rpx;
					background-color: #F5F7FA;
				}
			}

			.ipt {
				background-color: #F5F7FA;
				// margin-left: 20rpx;
			}
		}

		.btn {
			width: 400rpx;
			height: 80rpx;
			background-color: #148AE4;
			margin: 0 auto;
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;

			text {
				font-size: 32rpx;
				color: #fff;
			}

		}
	}
</style>